<template>
  <div class="serviceidcount-list syscountsort-list" style="height:170px; margin-bottom: 20px;">
    <ul class="serviceidcount-header">
      <li class="th0">序号</li>
      <li class="th1">受理ID</li>
      <li class="th2">名称</li>
      <li class="th3">交易量</li>
      <li class="th4">交易耗时</li>
    </ul>
    <ul class="serviceidcount-body syscountsort-body" v-for="(syscount,index) in syscountsort" :key="index">
      <li class="td0">{{ index+1 }}</li>
      <li class="td1">{{ syscount.sysId }}</li>
      <li class="td2">{{ syscount.sysName }}</li>
      <li class="td3">{{ syscount.transCount }}</li>
      <li class="td4"><span :style="{color:(syscount.useTime > 1500) ? '#c03636':(syscount.useTime >= 500 && syscount.useTime < 1500) ? '#c9852f':(syscount.useTime < 500) ?'#2572bf':'#2572bf'}">{{ syscount.useTime }}</span></li>
    </ul>
    <div class="bottompad"></div>
  </div>
</template>

<script>
// import moment from 'moment'
import axios from 'axios'
import $ from 'jquery'
export default {
  name: 'ServiceCount',
  data () {
    return {
      syscountsort: [] // ESB受理系统的交易量排名
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
    this.getSyscountsortList()
    this.slideUp($('.syscountsort-list'))
  },
  methods: {
    /**
    * ESB受理系统的交易量排名
    **/
    getSyscountsortList () {
      axios.get('../data/syscountsort.json').then((res) => {
        // 用axios的方法引入地址-赋值
        this.syscountsort = res.data.data.systrans
      }).catch(function (error) {
        console.log(error)
      })
    },
    /**
    * 向上滚动特效
    * @param {*} event 
    * @param {*} config 
    */
    slideUp (event, config) {
      config = $.extend({
        li_h: 31,
        time: 2000,
        movetime: 1500
      }, config)

      // 向上滑动动画
      function autoani () {
        $('.syscountsort-body:first', event).animate({
          'margin-top': -config.li_h
        }, config.movetime, function () {
          $(this).css('margin-top', 0).appendTo(event)
        })
      }
      // 自动间隔时间向上滑动
      var anifun = setInterval(autoani, config.time)

      // 悬停时停止滑动，离开时继续执行
      $(event).hover(function () {
        clearInterval(anifun) // 清除自动滑动动画
      }, function () {
        anifun = setInterval(autoani, config.time) // 继续执行动画
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .serviceidcount-list{
    padding: 0 10px;
    opacity: 0.8;
    height: 390px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    .serviceidcount-header{
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      border-bottom: 2px solid #4b7797;
      position: relative;
      z-index: 100000;
      background: #4b7797;
      li{
				float: left;
				height: 31px;
				line-height: 31px;
				padding:0 5px;
				color: #fff;
				font-size: 14px;
				position: relative;
				z-index: 100000;
			}
      .th0{
				float: left;
				width: 9%;
			}
			.th1{
				float: left;
				width: 18%;
			}
			.th2{
				float: left;
				width: 30%;
			}
			.th3{
				float: left;
				width: 17%;
			}
			.th4{
				float: left;
				width: 24%;
			}
    }
    .serviceidcount-body{
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      border-bottom: 1px solid #4b7797;
      position: relative;
      z-index: 1000;
      li{
				float: left;
				padding:0 5px;
				height: 31px;
				line-height: 31px;
				color: #333;
				font-size: 13px;
				overflow: hidden;
				white-space: nowrap;
        text-overflow: ellipsis;
      }
      .td0{
				float: left;
				width: 9%;
			}
			.td1{
				float: left;
				width: 18%;
			}
			.td2{
				float: left;
				width: 30%;
			}
			.td3{
				float: left;
				width: 17%;
			}
			.td4{
				float: left;
				width: 24%;
			}
    }
  }
</style>
